<template>
    <div class="page-body">
        <div style="margin-top:41px" v-if="!userinfo">
            <div class="header">
                <span></span>
                <h1>购物车</h1>
                <span></span>
            </div>
            <div class="nolog" v-if="!userinfo">
                <p>
                    您还没有登录哦！请先
                    <router-link to="/login">登录</router-link>
                </p>
            </div>
             <div class="nolog" v-if="userinfo">
                <p>
                    您购物车还没有东西，赶快去添加
                   
                </p>
            </div>
        </div>
        <div id="chartroot">
            <div v-if="userinfo">
                <div class="header">
                    <span></span>
                    <h1>购物车</h1>
                    <span class="header-span">
                <span @click="showDeleteClick">{{showDelete?"完成":"编辑"}}</span>
                    </span>
                </div>
                <div class="goods-box">
                    <div class="goodslist-root">
                        <div>
                            <div class="kind-box">

                                <div v-for="(v,k) in cartList" class="cart-list">
                                    <div class="kind-main" v-for="g in v">
                                        <div class="kind-mian-left">
                                            <div class="manjian">满减</div>
                                            <div class="dashed"></div>
                                            <div>
                                                <label :for="g._id">
                                             <span 
                                                class="fa fa-circle-thin goods-checked"
                                                style="color:#777"
                                                v-show="!g.check"
                                            >
                                            </span>
                                            <span 
                                                class="fa fa-check-circle goods-checked"
                                                style="color:#ee0000"
                                                v-show="g.check"
                                            >
                                            </span>
                                        </label>
                                                <input :id="g._id" type="checkbox" class="select-input" v-model="g.check" @change="$forceUpdate()">
                                            </div>

                                        </div>
                                        <div class="kind-mian-right">
                                            <div class="kind-mian-right-top">
                                                {{g.goods.desc}}
                                            </div>
                                            <div class="kind-mian-right-bottom">
                                                <div class="goods-img">
                                                    <img :src="'/imgs/goods/'+g.goods.pics[0]">
                                                </div>
                                                <div class="goods-info">
                                                    <p>{{g.goods.goodsname}}</p>
                                                    <p v-show="!showDelete" class="goods-regular">已选：<span v-for="r in g.reg">{{r}}</span>
                                                    </p>
                                                    <p v-show="showDelete" class="goods-regular edit-regular" @click="showCarClick(g)">
                                                        <span>
                                                    <span v-for="r in g.reg">{{r}}</span>
                                                        </span>
                                                        <span class="fa fa-angle-down"></span>
                                                    </p>
                                                    <p>
                                                        <span class="price-span">￥{{g.goods.price}}
                                                </span>
                                                        <span class="num-span"> 
                                                    <div>
                                                        <span @click="numberDecrease(g,1)">-</span>
                                                        <span>{{g.gnum}}</span>
                                                        <span @click="numberDecrease(g,2)">+</span>
                                                </div>
                                                </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom" v-show="!showDelete">
                <div class="bottom-left">
                    <span class="all-check">
                    <span>
                        <label 
                            for="allchecked" 
                           >
                             <span 
                                class="fa fa-circle-thin all-checked"
                                v-show="!isAllCheck()"
                            >
                            </span>
                    <span class="fa fa-check-circle all-checked" style="color:#ee0000" v-show="isAllCheck()">
                            </span>
                    </label>
                    <input id="allchecked" type="checkbox" class="select-input" @change="allCheck" :checked="isAllCheck()">
                    </span>
                    <span class="quanxuan-span">全选</span>
                    </span>
                    <span>合计 : <span class="fa fa-rmb">{{totalPrice}}.00</span></span>
                </div>
                <div class="bottom-right">去结算<span class="jinum">({{totalNum}})</span></div>
            </div>
            <div class="delete-bottom" v-show="showDelete">
                <div class="bottom-left">
                    <span class="all-check all-checkt">
                    <span>
                        <label 
                            for="allchecked" 
                           >
                             <span 
                                class="fa fa-circle-thin all-checked"
                                v-show="!isAllCheck()"
                            >
                            </span>
                    <span class="fa fa-check-circle all-checked" style="color:#ee0000" v-show="isAllCheck()">
                            </span>
                    </label>
                    <input id="allchecked" type="checkbox" class="select-input" @change="allCheck" :checked="isAllCheck()">
                    </span>
                    <span class="quanxuan-span">全选</span>
                    </span>
                </div>
                <div class="delete-right">
                    <div>分享</div>
                    <div>移入关注</div>
                    <div @click="deleteChecked">删除({{inputId.length}})个</div>
                </div>
            </div>
            <transition name="aniMask">
                <div v-show="showCar" class="car-mask" @click="hideShowCar">
                </div>
            </transition>

            <transition name="aniEdit">
                <Cartlist v-if="showCar"></Cartlist>
            </transition>
        </div>
    </div>
    <TabBar></TabBar>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    import TabBar from '@/components/TabBar.vue'
    import Cartlist from '@/components/Cartlist.vue'
    export default {
        components: {
            Cartlist,
            TabBar
        },
        data: function () {
            return {
                gnum: 0,
                cartInfo: [],
                showDelete: false,
                inputId: [],
            }
        },
        computed: {
            cartList: function () {
                var goodCategory = {};
                this.findchart.forEach(e => {
                    // console.dir(e);
                    if (!goodCategory[e.goods.goodsname]) {
                        goodCategory[e.goods.goodsname] = [];
                    }
                    goodCategory[e.goods.goodsname].push(e);
                });
                // console.dir(goodCategory);
                return goodCategory;
            },
            totalPrice: function () {
                this.inputId = [];
                return this.findchart.map(g => {
                    if (!g.check) {
                        return 0;
                    } else {
                        this.inputId.push(g._id);
                        this.checkednum = this.inputId.length;
                    }
                    return g.goods.price * g.gnum;
                }).reduce((pre, price) => {
                    return pre + price;
                }, 0);
            },
            totalNum: function () {
                var cartNum = 0;
                return this.findchart.map(g => {
                    if (!g.check) {
                        return 0;
                    } else {
                        return g.gnum;
                    }
                }).reduce((pre, gnum) => {
                    return pre + gnum;
                });
            },
            ...mapState([
                "userinfo",
                "findchart",
                "showCar",
                "skindItem",
            ])
        },
        mounted: function () {
            this.$store.dispatch("requestIslogin")
                .then(res => {
                    this.$store.commit("setUserinfo", res.data.userinfo);
                    var params = {
                        _id: this.userinfo._id
                    }
                    // console.log(this.userInfo._id);
                    // 某个用户的购物车商品
                    this.$store.dispatch("requestFindchart", params)
                        .then(res => {
                            res.data.data.forEach(e => {
                                e.check = false;
                            });
                            this.cartInfo = res.data.data;
                            this.$store.commit("setFindchart", res.data.data);
                            // console.dir(res.data.data);
                        });
                });
        },
        methods: {
            back: function () {
                history.back();
            },
            // 点击修改购物车商品数量
            numberDecrease: function (g, n) {
                if (n == 1) {
                    g.gnum--;
                } else {
                    g.gnum++
                }
                if (g.gnum < 1) {
                    g.gnum = 1;
                } else {
                    g.check = true;
                    var params = {
                        gnum: g.gnum,
                        _id: g._id
                    }
                    this.$store.dispatch("requestEditChart", params)
                        .then(res => {
                            if (!res.data.err) {
                                console.log(res.data.msg);
                            }
                        });
                }
            },
            // 点击控制是否显示底部删除以切换编辑完成
            showDeleteClick: function () {
                this.showDelete = !this.showDelete;
            },
            // 点击商品规格显示出选择商品规格界面
            showCarClick: function (g) {
                this.$store.commit("setSkindItem", g.goods);
                var gInfo = {
                    reg: g.reg,
                    _id: g._id
                }
                this.$store.commit("setCartItemReg", gInfo);

                this.$store.commit("setShowCar", true);
            },
            // 点击右上角叉号隐藏商品规格界面
            hideShowCar: function () {
                this.$store.commit("setShowCar", false);
            },
            // 点击店铺选中属于该店铺的所有商品
            categoryClick: function (e, k) {
                this.cartList[k].forEach(g => {
                    g.check = e.target.checked;
                });
                this.$forceUpdate();
            },
            // 判断是否选中属于该店铺的所有商品
            isCategoryClick: function (k) {
                return this.cartList[k].every(g => {
                    return g.check;
                });
            },
            // 点击全选，选择购物车内的全部商品
            allCheck: function (e) {
                this.findchart.forEach(g => {
                    g.check = e.target.checked;
                })
                this.$forceUpdate();
            },
            // 判断是否全选
            isAllCheck: function () {
                // console.dir(this.cartInfo);
                return this.findchart.every(g => {
                    return g.check;
                });
            },
            // 删除所选商品
            deleteChecked: function () {
                var params1 = {
                    inputId: this.inputId
                }
                this.$store.dispatch("requestDeleteChart", params1)
                    .then(res1 => {
                        if (!res1.data.err) {
                            var params = {
                                _id: this.userinfo._id
                            }
                            this.$store.dispatch("requestFindchart", params)
                                .then(res => {
                                    res.data.data.forEach(e => {
                                        e.check = false;
                                    });
                                    this.cartInfo = res.data.data;
                                    this.$store.commit("setFindchart", res.data.data);
                                });
                        }
                    });
            }
        }
    }

</script>

<style scoped>
    #chartroot{
        margin-top:40px;
    }
    
    .header {
        padding: 7px 15px;
        width: 100vw;
        height: 44px;
        background-color: red;
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 0;
        left: 0;
        border-bottom: 0.5px solid #eee;
        color: white;
        z-index:1;
    }

    .header img {
        height: 44px;
        margin-right: 7px;
    }

    .header-span span:nth-of-type(1) {
        font-size: 14px;
        color: #777;
        margin-right: 7px;
        -moz-user-select: none;
    }

    .header-span span:nth-of-type(2) {
        font-size: 18px;
        color: #333;
    }

    .header h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
    }
    .nolog{
        margin-top:25vh;
        color: #999999;
    }
    .nolog a{
        color: red;
        font-size: 18px;
    }
    .goods-box {
        width: 100vw;
    }

    .goodslist-root {
        width: 100vw;
    }

    .goodslist-root h3 {
        padding-left: 5px;
        margin: 0;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .h3-class {
        display: inline-block;
    }

    .delete {
        position: relative;
        font-size: 14px;
        top: 2px;
        left: 157px;
        color: white;
        display: inline-block;
        text-align: center;
        background-color: #ee0000;
        border-radius: 5px;
        line-height: 24px;
        width: 72px;
        height: 24px;
    }
    /*商品列表*/

    .select-input {
        display: none;
    }

    .kind-main {
        display: flex;
        padding-left: 2px;
        background-color: #fefefe;
        padding-top: 10px;
        padding-bottom: 5px;
        margin-bottom: 1px;
    }

    .manjian {
        background-color: #ee0000;
        border-radius: 3px;
        padding: 1px;
        color: white;
        font-size: 12px;
        text-align: center;
    }

    .dashed {
        width: 0;
        margin-top: 2px;
        border-left: 1px dashed #aaa;
        height: 50px;
        position: relative;
        left: 20px;
    }

    .kind-mian-right {
        flex-grow: 1;
    }

    .kind-mian-right-top {
        margin-left: 4px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 13px;
        text-align:left;
    }

    .kind-mian-right-bottom {
        margin-top: 10px;
        margin-right: 10px;
        display: flex;
    }
    .goods-img{
        width: 80px;
        height:80px;
    }
    .goods-img img {
        width: 100%;
        height: 100%;
        margin-right: 10px;
    }

    .goods-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 58vw;
        /*height: 110px;*/
        /*overflow: hidden;*/
    }

    .goods-info>p:nth-of-type(1) {
        font-size: 13px;
        line-height: 16px;
        width: 100%;
        margin: 0;
    }

    .goods-regular {
        font-size: 12px;
        color: #666;
        text-align: left;
    }
    .edit-regular {
        background-color: #eee;
        display: flex;
        justify-content: space-between;
        padding: 1px 3px;
    }

    .edit-regular>span:nth-of-type(2) {
        margin-right: 3px;
        font-size: 14px;
    }

    .goods-info>p:nth-of-type(4) {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0;
    }

    .price-span {
        color: #ee0000;
    }

    .num-span {
        font-size: 17px;
        font-family: "宋体";
        color: #666;
        position: relative;
        top: -2px;
    }

    .num-span div {
        background-color: #ededed;
        border-radius: 2px;
    }

    .num-span span:nth-of-type(1) {
        border-right: 1px solid #fefefe;
        padding: 5px;
        font-size: 19px;
    }

    .num-span span:nth-of-type(3) {
        border-left: 1px solid #fefefe;
        padding: 5px;
        font-size: 19px;
    }

    .all-checked {
        font-size: 22px;
        margin: 0 10px;
        position: relative;
        top: 2px;
    }

    .shop-checked {
        font-size: 22px;
        margin: 0 10px;
        position: relative;
        top: 2px;
    }

    .goods-checked {
        font-size: 22px;
        margin: 0 10px;
    }
    .bottom {
        position: fixed;
        left: 0;
        bottom: 42px;
        width: 100%;
        height: 40px;
        background-color: #f8f7f7;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
    }
    .bottom-left{
        width: 60%;
    }
    .bottom-right{
        width: 40%;
        font-size: 18px;
        background-color: #ee0000;
        line-height: 40px;
        color: white;
    }

    .jinum {
        font-size: 18px;
        margin-left: 8px;
    }

    .all-check {
        color: #666;
        font-size: 14px;
        line-height: 45px;
        position: relative;
        top: -1px;
        text-align: left;
        margin-right: 15%;
    }

    #allcheck-label {
        position: relative;
        top: 4px;
        left: -1px;
    }

    .allcheck-label-span {
        position: relative;
        top: -10px;
        left: -1px;
    }
    .bottom{
        width: 100%;
    }
    .bottom-left{
        width: 70%;
    }
    .bottom-left>span:nth-of-type(2) {
        line-height: 45px;
        font-size: 14px;
        color: #111;
        text-align: right;
    }

    .cart-list {
        margin-top: 10px;
        border: 0.5px solid #eee;
        border-left: none;
        border-right: none;

        /*padding-bottom: 10px;*/
    }
    .quanxuan-span {
        position: relative;
        top: -1px;
        left: -8px;
    }

    .delete-bottom {
        position: fixed;
        left: 0;
        bottom: 40px;
        width: 100vw;
        height: 45px;
        background-color: #f8f7f7;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
    }

    .delete-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .delete-right div {
        font-size: 13px;
        color: #444;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px 10px;
        margin-right: 8px;
        width: 80px;
    }

    .delete-right div:nth-of-type(3) {
        color: #ee0000;
        border: 1px solid #ee0000;
    }

    .all-checkt {
        position: relative;
        top: 1px;
        
    }
    /*蒙灰层*/

    .car-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }
    /*蒙灰层动画*/

    .aniMask-enter,
    .aniMask-leave-to {
        opacity: 0;
    }

    .aniMask-enter-active,
    .aniMask-leave-active {
        transition: all 0.7s;
    }

    .aniMask-enter-to,
    aniMask-leave {
        opacity: 1;
    }
    /*编辑层动画*/

    .aniEdit-enter,
    .aniEdit-leave-to {
        opacity: 0;
        height: 0 !important;
    }

    .aniEdit-enter-active,
    .aniEdit-leave-active {
        transition: all 0.7s;
    }

    .aniEdit-enter-to {
        opacity: 1;
        height: 55vh !important;
    }
</style>